import React from 'react'
import styles from './css/goods-item/index.module.scss'
import { useDispatch } from 'react-redux';
import { addToCart } from "../stores/cartSlice";
import { ShoppingCartO, Contact } from '@react-vant/icons';

export default function GoodsItem({ item }) {
  const dispatch = useDispatch();

  return (
    <li className={styles["list-goods"]}>
      <div className={styles["goods-content"]}>
        <a href="#" className={styles["goods-list-a"]}>
          <img src={"//oss.51cocoa.com/" + item?.img_url} alt="" />
          <h3>{item?.name}</h3>
          <span>{`￥${item?.price}/${item?.weight}g(${item?.spec})`}</span>
        </a>
        <div className={styles["lable"]}>
          {item?.tags.map((tag, i) => (
            <div style={{ display: 'inline-block' }} key={i}>
              {i < 3 && <a href="#">{tag?.content + '>'}</a>}
            </div>
          ))}
        </div>

        <div href="#" className={styles["goods-list-addcard"]}>
          <ShoppingCartO color="#684029" fontSize="20px" />
          <span onClick={() => dispatch(addToCart({ id: item.cake_goods_id }))}>加入购物车</span>
        </div>
      </div>
      <div></div>
      {item?.label.map((label, i) => (
        <div className={styles["title-label"]} key={i}>
          <img src={"//oss.51cocoa.com/" + label?.icon} alt="" />
        </div>
      ))}
    </li>
  )
}
